import React from "react"
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Checkbox, Col, Input, Select, Switch } from "antd";
import ToolTipsInput from "libs/tooltips-input"
import "../../../fonts/clothing-icon/flaticon.css"
import cs from "classnames"

const Option = Select.Option
const InputGroup = Input.Group
const size = 'default'
const span = 18

const createFormItems = ({getFieldDecorator, initData}) => {

  return [
    <Form.Item label={'平台编号'}>
      <Col span={span}>
        {getFieldDecorator('sysCode')(
          <Input size={size}/>
        )}
      </Col>
    </Form.Item>,


    <Form.Item label={'服装编号'}>
      <Col span={span}>
        {getFieldDecorator('code')(
          <ToolTipsInput size={size}
                         title={'4-10位字母数字或-,例如:LD-00001'}
                         placeholder='请输入唯一的服装编号'/>
        )}
      </Col>
    </Form.Item>,

    <Form.Item label={'尺码表类别'}>
      <Col span={span}>
        {getFieldDecorator('sizeTypeId')(
          <Select className={'clothing-size-type'} size={size} placeholder="请选择该服装对应尺码表类别">
            {(
              initData.sizeTypes || []).map(i =>
              <Option key={i.id} className={'clothing-size-type-li'} value={i.id}>
                <i className={cs('glyph-icon', ` flaticon-${i.icon}`)}/>{i.name}
              </Option>
            )}
          </Select>
        )}
      </Col>
    </Form.Item>,


    <Form.Item label={'适应季节'}>
      {getFieldDecorator('seasons')(
        <Checkbox.Group>
          {
            (initData.season || []).map(i => <Checkbox key={i.value} value={i.value}>{i.text}</Checkbox>)
          }
        </Checkbox.Group>
      )}
    </Form.Item>,

    <Form.Item label={'服装分类'}>
      {getFieldDecorator('typeIds')(
        <Select optionLabelProp={'name'} ptionFilterProp='code' mode="multiple" size={size} placeholder="请选择服装分类">
          {
            (initData.typeCategory || []).map(i =>
              <Option key={i.id} value={i.id} name={i.name} code={i.code}>
                <span className={'option-type-name'}>{i.name}</span>
                <span className={'option-type-code'}>{i.code}</span>
                <span className={'option-shop-name'}>{i.count}</span>
              </Option>
            )
          }
        </Select>
      )}
    </Form.Item>,


    <Form.Item label={'服装风格'}>
      {getFieldDecorator('styleIds')(
        <Select optionLabelProp={'name'} optionFilterProp='code' mode="multiple" size={size} placeholder="请选择一个或多个服装风格">
          {
            (initData.styleCategory || []).map(i =>
              <Option key={i.id} value={i.id} name={i.name} code={i.code}>
                <span className={'option-type-name'}>{i.name}</span>
                <span className={'option-type-code'}>{i.code}</span>
                <span className={'option-shop-name'}>{i.count}</span>
              </Option>
            )
          }
        </Select>
      )}
    </Form.Item>,


    <Form.Item label={'适用场合'}>
      {getFieldDecorator('purposeIds')(
        <Select optionLabelProp={'name'} ptionFilterProp='code' mode="multiple" size={size} placeholder="请选择一个或多个适用场合">
          {
            (initData.purposeCategory || []).map(i =>
              <Option key={i.id} value={i.id} name={i.name} code={i.code}>
                <span className={'option-type-name'}>{i.name}</span>
                <span className={'option-type-code'}>{i.code}</span>
                <span className={'option-shop-name'}>{i.count}</span>
              </Option>
            )
          }
        </Select>
      )}
    </Form.Item>,


    <Form.Item label={'适用人群'}>
      {getFieldDecorator('peopleIds')(
        <Select optionLabelProp={'name'} ptionFilterProp='code' mode="multiple" size={size} placeholder="请选择一个或多个适用人群">
          {
            (initData.peopleCategory || []).map(i =>
              <Option value={i.id} name={i.name} code={i.code}>
                <span className={'option-type-name'}>{i.name}</span>
                <span className={'option-type-code'}>{i.code}</span>
                <span className={'option-shop-name'}>{i.count}</span>
              </Option>
            )
          }
        </Select>
      )}
    </Form.Item>
  ]
}

export default createFormItems